<template>
  <p>选择地区：</p>
  <el-select
    style="margin-right: 10px"
    v-model="province"
    placeholder="请选择省"
  >
    <el-option
      v-for="item in Area"
      :key="item.value"
      :label="item.label"
      :value="item"
    ></el-option>
  </el-select>
  <el-select style="margin-right: 10px" v-model="city" placeholder="请选择市">
    <el-option
      v-for="item in cityQuery"
      :key="item.value"
      :label="item.label"
      :value="item"
    ></el-option>
  </el-select>
  <el-select v-model="area" placeholder="请选择区">
    <el-option
      v-for="item in areaQuery"
      :key="item.value"
      :label="item.label"
      :value="item"
    ></el-option>
  </el-select>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Location from './location.json'
const Area = ref<any>([])
const cityQuery = ref<any>([])
const areaQuery = ref<any>([])
Area.value = Location
const province = ref<any>('')
const city = ref<any>('')
const area = ref<any>('')
const $emit = defineEmits(['searchLocal'])
watch(province, (newValue) => {
  cityQuery.value = []
  areaQuery.value = []
  city.value = ''
  Area.value.forEach((item: any) => {
    if (item.value === newValue.value) {
      cityQuery.value = item.children
    }
  })
  searchLoacl()
})
watch(city, (newValue) => {
  areaQuery.value = []
  area.value = ''
  cityQuery.value.forEach((item: any) => {
    if (item.value === newValue.value) {
      areaQuery.value = item.children
    }
  })
  searchLoacl()
})
watch(area, () => {
  searchLoacl()
})

const searchLoacl = () => {
  const local =
    (province.value.label || '') +
    (city.value.label || '') +
    (area.value.label || '')
  $emit('searchLocal', local)
}
</script>
<style lang="scss" scoped>
el-select {
  margin-left: 10px;
}
</style>
